<template>
  <!-- 详情 -->
  <el-dialog
    :visible.sync="dialogVisible"
    width="50%"
    append-to-body
    :close-on-click-modal="false"
    :before-close="closedialog"
		class="self-dialog"
  >
    <el-descriptions
      class="margin-top"
      title="运管挂车备案详情"
      :column="2"
      border
    >
      <el-descriptions-item>
        <template slot="label"> 主管海关 </template>
				<dict-value
					:list="customsList"
					:dictCode="form.mainPort"
				></dict-value>
      </el-descriptions-item>
			<el-descriptions-item>
        <template slot="label"> 场所编码 </template>
				<dict-value
					:list="fieldOptions"
					:dictCode="form.fieldCode"
				></dict-value>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 挂车牌号 </template>
        {{ form.trailerLicenseNo }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 挂车注册地 </template>
				<dict-tag
          :options="dict.type.sw_vehicle_reg_place"
          :value="form.trailerRegPlace"
        />
      </el-descriptions-item>
			<el-descriptions-item>
        <template slot="label">
          挂车备案类别
        </template>
				<dict-tag
          :options="dict.type.road_trailer_type"
          :value="form.trailerClassFlag"
        />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 挂车重量 </template>
        {{ form.trailerWt }}
      </el-descriptions-item>
			<el-descriptions-item>
        <template slot="label"> 挂车牌号图片 </template>
				<div v-if="form.trailerLicenseNoPic">
					<a :href="baseUrl+form.trailerLicenseNoPic" style="text-decoration: underline;" target="_blank">
						<el-button icon="el-icon-view" size="mini" type="primary">查看照片</el-button>
					</a>
				</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 车厢照片 </template>
				<div v-if="form.veConPic">
					<a :href="baseUrl+form.veConPic" style="text-decoration: underline;" target="_blank">
						<el-button icon="el-icon-view" size="mini" type="primary">查看照片</el-button>
					</a>
				</div>
      </el-descriptions-item>
			<el-descriptions-item>
        <template slot="label"> 挂车颜色 </template>
        {{ form.trailerColor }}
      </el-descriptions-item>
			<el-descriptions-item>
        <template slot="label"> 识别卡ID号 </template>
        {{ form.identifyIdNo }}
      </el-descriptions-item>
			<el-descriptions-item>
        <template slot="label"> 电子口岸报文ID </template>
        {{ form.eportId }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 回执时间 </template>
        {{ form.responseTime }}
      </el-descriptions-item>

			<el-descriptions-item>
        <template slot="label"> 申报状态 </template>
        <dict-tag
          :options="dict.type.sw_vehicle_decl_status"
          :value="form.proposeStatus"
        />
      </el-descriptions-item>
			<el-descriptions-item>
        <template slot="label"> 申请人 </template>
        {{ form.proposer }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 申请时间 </template>
        {{ form.proposeTime }}
      </el-descriptions-item>
			<el-descriptions-item>
        <template slot="label"> 创建时间 </template>
        {{ form.createTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 创建人 </template>
        {{ form.createBy }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 回执状态 </template>
        <dict-tag
          :options="dict.type.sw_vehicle_rcpt_status"
          :value="form.responseCode"
        />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 回执描述 </template>
        {{ form.responseText }}
      </el-descriptions-item>
    </el-descriptions>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button @click="closedialog">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getRoadTrailer } from "@/api/swdecl/roadTrailer";
export default {
  props: {
    detailId: {},
    dict: {},
		customsList: {
			type: Array,
			default: () => []
		},
		fieldOptions: {
			type: Array,
			default: () => []
		}
  },
  data() {
    return {
      //显示详情
      dialogVisible: false,
			baseUrl: process.env.VUE_APP_BASE_FILE_URL,
      form: {
        id: null,
        mainPort: null,
        trailerLicenseNo: null,
        trailerRegPlace: null,
        frameNo: null,
        trailerWt: null,
        trailerColor: null,
        fieldCode: null,
        veConPic: null,
        proposer: null,
        proposeTime: null,
        proposeStatus: null,
        responseTime: null,
        responseCode: null,
        responseText: null,
        responseType: null,
        trailerClassFlag: null,
        updateBy: null,
        updateTime: null,
        eportId: null,
        trailerLicenseNoPic: null,
        operationType: null,
        createTime: null,
        createBy: null,
        identifyIdNo: null,
      },
    };
  },
  watch: {
    detailId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.loadDetail();
        }
      },
    },
  },
  methods: {
    open() {
      this.dialogVisible = true;
    },
    closedialog() {
      this.dialogVisible = false;
    },
    // 获取详情
    loadDetail() {
      getRoadTrailer(this.detailId).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
        }
      });
    },
  },
};
</script>

<style>
</style>
